@charset "utf-8";
@import "reset";
@import "common";
//处理px单位的值，转换为rem单位
@function r($px) {
    @return $px/100px*1rem;
}
body{
     background-color: #f1f1f1;
     /*头部导航栏*/
    header {
        color: white;
        height: 44.5px;
        background-color: #b20000;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 r(16px);
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 2;
        >img {
            width: r(264px);
            height: 20px;
        }
        >img:last-of-type {
            width: 0.3rem;
        }
    }
    .search01 {
        margin-top: 44.5px;
        width: 100%;
        height: 100%;
        font-size: 12px;
            a {
                color: black;
            }   
    //  position: fixed;
    //  top: 0;
    //  left: 0;
    //  transition: all 0.8s;
    //  transform: translateY(100%);
    //  z-index: 3;
        .search-top {
            width: 100%;
            height: 43.5px;
            background-color: #1d1d1d; 
//          display: flex;
//          justify-content: space-between;
//          font-size: 0;
//          li:first-of-type {
//              padding: 11px r(24px);
//              .search_close {
//                  width: 22px;
//                  height: 22px;
//                  font-size: 12px;
//                  line-height: 22px;
//                  color: white;
//                  background-color: #b20000;
//                  text-align: center;
//                  border-radius: 50%;
//              }
//          }
            li:last-of-type {
                padding: r(13.5px);
                .search_text {
                    position: relative;
                    text-align: center;
                    input {
                        width: r(534px);
                        height: 27px;
                        color: #7e7e7e;
                        font-size: 11px;
                        line-height: 27px;
                        background-color: transparent;
                        border: 1px solid white;
                        border-radius: 20px;
                        padding: 0 r(64px);
                    }
                    i {
                        color: white;
                        position: absolute;
                        left: 30px;
                        top: 6px;
                    }
                }
            }
        }
        .search_key {
            height: 100%;
            padding: r(33px) r(30px) 0;
            background-color: #f1f1f1;
            font-size: 0;
            h3 {
                font-size: 13px;
                margin-bottom: r(16px);
            }
            .search_keys {
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
                text-align: center;
                li {
                    font-size: 15px;
                    //                  height: r(57px);
                    //                  line-height: r(57px);
                    border: #7E7E7E solid 1px;
                    background-color: white;
                    margin-right: r(8px);
                    margin-bottom: r(10px);
                    padding: r(16px);
                    a {
                        color: #8b8b8b;
                    }
                }
            }
        }
        .search-keyboard {
            position: fixed;
            bottom: 0;
            font-size: 0;
            img {
                width: 100%;
            }
        }
    }
}